@charset "UTF-8";
@sidebar-width: 80px;
// 内容主体
.content {
	background: #eee; 
}
// 侧边栏
.sidebar {
	float: left; 
	width: @sidebar-width; 
	height: 100%; 
	background: #fff; 
	overflow-y: auto; 

	& .sidebar-left {
		height: 100%; 

		& .li-item {
            width: @sidebar-width; 
            height: 66px; 
            line-height: 16px; 
            text-align: center; 
            border-bottom: 2px solid #eee; 
            background: #fff; 
            overflow: hidden; 
            display: -webkit-flex;  /* Safari */
			display: flex; 
			-webkit-justify-content: center;
            justify-content: center; 
            align-items: center; 
            flex-direction: column; 
            -moz-box-pack: center; 
            -webkit-box-pack: center; 
            -moz-box-align: center; 
            -webkit-box-align: center;
		}
		& a {
			text-decoration: none; 
			color: #000; 
			-webkit-tap-highlight-color:transparent; 
		}
		& .active {
            color: red; 
		}
	}
}
.main {
	margin-left: @sidebar-width + 12px; 
	height: 100%; 
	overflow-y: auto; 
}
.course-nav {
	margin-top: 12px; 
	margin-right: 10px; 
	padding-top: 12px; 
	background: #fff; 
	& .course-item {
		margin-bottom: 16px; 
		float: left; 
		width: 33.3%; 
		text-align: center; 
		& a {
			color: #000; 
			text-decoration: none; 
			-webkit-tap-highlight-color:transparent; 
		}

		& .class-img {
			display: block; 
			margin: 0 auto; 
		}
		& .class-title {
			display: block; 
			margin-top: 8px; 
			font-size: 12px; 
			overflow: hidden; 
		}
	}
}
& .course-list {
	margin-top: 14px; 
}
.course-module {
	margin-top: 14px; 
	& a {
		color: #000; 
		text-decoration: none; 
		-webkit-tap-highlight-color:transparent; 
	}
	& .left-img {
		float: left; 
		width: 100px; 
		height: 60px; 
		& img {
			width: 100%; 
			height: 100%; 
			border-radius: 4px; 
		}
	}
	& .right-c {
		margin-left: 12px; 
		float: left; 
		& .course-title {
			margin-top: 2px; 
			height: 20px; 
			line-height: 20px; 
			font-size: 16px; 
			color: #000; 
		}
		& .course-info {
			margin-top: 6px; 
			color: #777; 
			font-size: 10px; 

			& .item {
				& + .item {
					margin-left: 12px; 
				}
			}
		}
	}
}
